<!-- home -->
<template>
  <div>
    <div class="warpper">
      <van-sticky :offset-top="0">
        <van-search
          background="#fff"
          shape="round"
          placeholder="请输入搜索关键词"
          @focus="onfocus"
        />
      </van-sticky>
      <!-- 搜索end -->
      <van-swipe :autoplay="3000" class="my-swipe" style="margin-top: 5px">
        <van-swipe-item v-for="(image, index) in slideshowList" :key="index">
          <img v-lazy="imgUrls + image.pic" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图end -->
      <div style="background-color: #ffffff; margin-top: 5px">
        <div style="margin-top: 5px">
          <van-grid :column-num="4" :border="false">
            <template v-for="(item, index) in menus">
              <van-grid-item :to="item.url">
                <van-image width="50" height="50" :src="imgUrls + item.pic" />
                <span>
                  <font size="3" color="">{{ item.name }}</font>
                </span>
              </van-grid-item>
            </template>
          </van-grid>
        </div>
      </div>
      <!-- 宫格end -->
      <!-- 热门 新品end -->

      <!-- 商品列表end -->

      <!-- 精品推荐 -->
      <div style="background: #ffffff">
        <div style="padding: 10px">精品推荐:</div>

        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字">
            <van-card
              class="goods-card"
              price="2.00"
              origin-price="10.00"
              title="商品标题"
              thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
            >
            </van-card
          ></van-grid-item>
        </van-grid>
      </div>

      <!-- 猜你喜欢 -->
      <div style="background: #ffffff">
        <div style="padding: 10px">猜你喜欢:</div>
        <van-card
          tag="Like"
          price="2.00"
          origin-price="10.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getMenus, getBanner } from "@/api/home.js";
import { imgList } from "../../imgData";
export default {
  data() {
    return {
      imgUrls: this.$baseApi,
      menus: [],
      groupLists: [],
      slideshowList: [],
      value: "",
      recommendedList: imgList,
    };
  },

  created() {
    this.getData();
  },
  methods: {
    getData() {
      getMenus().then((res) => {
        this.menus = res.data;
      });
      getBanner().then((res) => {
        this.slideshowList = res.data;
      });
    },
    goto(url) {
      this.$router.push(url);
    },
    onfocus() {
      this.$router.push("/search");
    },
  },
};
</script>
<style lang="scss" scoped>
.van-card {
  background-color: #ffffff;
}
.goods-card {
  .van-card__header {
    flex-direction: column;
    align-items: center;
    .van-card__content {
      min-height: 0%;
    }
  }
}
.van-card__price {
  color: #ffd01e;
}
.warpper {
  background-color: #f8f8f8;
  padding: 5px;
}

.my-swipe .van-swipe-item img {
  width: 100%;
  height: 200px;
}

.my-swipe {
  margin-top: 5px;
  margin-bottom: 7px;
  height: 180px;
}

// 滚动条
.item {
  margin: 5px;
  width: 31.3%;
  white-space: nowrap;
  display: inline-block;
}

.scroll {
  padding: 5px;
  margin-top: 8px;
  background-color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

::-webkit-scrollbar {
  display: none;
}

// 滚动条
.grid2 /deep/ .van-hairline {
  align-items: flex-start;
}

.grid2 {
  background-color: #f8f8f8;
  margin-top: 8px;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  margin-left: 8px;
  height: 18px;
  width: 18px;
  color: #fff;
  font-size: 5px;
  text-align: center;
  background-color: #ff8001;
}

.classifys {
  height: 35px;
  line-height: 35px;
  padding: 15px;
}

.activity {
  background-color: #ffffff;
  margin-top: 10px;
  padding: 5px;
}

.activity-col {
  padding: 10px;
  background-color: #ffe3ce;
}
</style>
